/*
 *@author: YangJie
 *@date: 2021-04-12 16:07:05
 *@version:
 *@description:参数设置->系统管理->文档类型
 */
import React, { Component } from 'react';
import { Button, Form, Tabs, Tree } from 'antd';
import '@/assets/css/settings';
import BasicConfirm from '../../../components_yyr/common/basicConfirm';

const { TabPane } = Tabs;
const { TreeNode } = Tree;

//测试数据
const treeData = [
	{
		title: '0-0',
		key: '0-0',
		children: [
			{
				title: '0-0-0',
				key: '0-0-0',
				children: [
					{ title: '0-0-0-0', key: '0-0-0-0' },
					{ title: '0-0-0-1', key: '0-0-0-1' },
					{ title: '0-0-0-2', key: '0-0-0-2' }
				]
			},
			{
				title: '0-0-1',
				key: '0-0-1',
				children: [
					{ title: '0-0-1-0', key: '0-0-1-0' },
					{ title: '0-0-1-1', key: '0-0-1-1' },
					{ title: '0-0-1-2', key: '0-0-1-2' }
				]
			},
			{
				title: '0-0-2',
				key: '0-0-2'
			}
		]
	},
	{
		title: '0-1',
		key: '0-1',
		children: [
			{ title: '0-1-0-0', key: '0-1-0-0' },
			{ title: '0-1-0-1', key: '0-1-0-1' },
			{ title: '0-1-0-2', key: '0-1-0-2' }
		]
	},
	{
		title: '0-2',
		key: '0-2'
	}
];

//参考看看：https://www.jb51.net/article/198659.htm https://blog.csdn.net/qq_37210523/article/details/83543746
class DocumentType extends Component {
	state = {
		formValues: {},
		expandedKeys: ['0-0-0', '0-0-1'],
		autoExpandParent: true,
		checkedKeys: ['0-0-0'],
		selectedKeys: []
	};
	componentDidMount() {
		this.fetch({
			pageNum: 1,
			pageSize: 10
		});
		// this.getInfo();
	}
	//初始化加载数据
	fetch = data => {
		// this.setState({ loading: true })
		// this.post('/airCargo/pageList',{data}).then(res => {
		// 	this.setState({
		// 		loading: false,
		// 		dataSource: res.data.data,
		// 		total:res.data.total,
		// 		formValues:data
		// 	});
		// })
	};

	//表单查询
	filterSubmit = values => {
		values.pageNum = this.state.formValues.pageNum;
		values.pageSize = this.state.formValues.pageSize;
		this.fetch(values);
	};

	//头部关键字查询部分
	formList = () => {
		const formList = [
			{ type: 'INPUT', label: '姓名', field: 'factoryName', col: 6 },
			{ type: 'DATE', label: '记录时间', field: 'recordTime', col: 6 },
			{ type: 'INPUT', label: '快速查询', field: 'message', placeholder: '请输入消息内容', col: 6 }
		];
		return formList;
	};

	// 提交modal
	handleSubmit = data => {
		const id = this.state.chooseData && this.state.chooseData.id;
		if (id) {
			data = Object.assign({}, data, { id: id });
			data.updateId = localStorage.getItem('userId');
		} else {
			data.createId = localStorage.getItem('userId');
		}
		this.post('/airCargo/addAirCargo', { data }).then(res => {
			this.success();
			this.fetch({ ...this.state.formValues });
			this.onClose();
		});
	};

	onClose = () => {
		this.setState({
			drawerVisible: false,
			chooseData: {}
		});
		this.modalRef.props.form.resetFields();
	};

	// 打开modal，判断是修改还是新增 0新增 1修改
	handleModal = (type, data) => {
		if (type) {
			this.setState({
				drawerTitle: '修改',
				drawerVisible: true,
				chooseData: data
			});
		} else {
			this.setState({
				drawerTitle: '新增',
				drawerVisible: true
			});
		}
	};
	handleConfirm = (value, api, chooseData) => {
		if (api === 1) {
			this.get(`/airCargo/delAirCargo?id=${chooseData.id}`).then(res => {
				this.success();
				this.fetch({ ...this.state.formValues });
			});
		}
	};

	onExpand = expandedKeys => {
		console.log('onExpand', expandedKeys);
		// if not set autoExpandParent to false, if children expanded, parent can not collapse.
		// or, you can remove all expanded children keys.
		this.setState({
			expandedKeys,
			autoExpandParent: false
		});
	};

	onCheck = checkedKeys => {
		console.log('onCheck', checkedKeys);
		this.setState({ checkedKeys });
	};

	onSelect = (selectedKeys, info) => {
		console.log('onSelect', info);
		this.setState({ selectedKeys });
	};

	renderTreeNodes = data =>
		data.map(item => {
			if (item.children) {
				return (
					<TreeNode title={item.title} key={item.key} dataRef={item}>
						{this.renderTreeNodes(item.children)}
					</TreeNode>
				);
			}
			return <TreeNode key={item.key} {...item} />;
		});

	render() {
		const columns = [
			{ title: '序号', width: 100, dataIndex: 'id' },
			{ title: '记录时间', width: 150, dataIndex: 'recordTime' },
			{ title: '姓名', width: 250, dataIndex: 'name' },
			{ title: '消息', width: 600, dataIndex: 'message' },
			{ title: '状态', dataIndex: 'status' }
		];

		const { chooseData, drawerVisible, drawerTitle, dataSource, loading, total, formValues } = this.state;

		//序号旁的checkbox部分
		const rowSelection = {
			onChange: (selectedRowKeys, selectedRows) => {
				console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			},
			getCheckboxProps: record => ({
				disabled: record.name === 'Disabled User', // Column configuration not to be checked
				name: record.name
			})
		};

		return (
			<div className="shadow-radius">
				<Tabs
					tabBarExtraContent={
						<div className="buttonList">
							<Button icon="plus" onClick={() => this.handleModal(0, {})} type="primary">
								添加同级
							</Button>
							<Button icon="minus" onClick={() => this.handleModal(0, {})} type="primary">
								添加下级
							</Button>
							<Button icon="edit" onClick={() => this.handleModal(1, treeData[0])} type="primary">
								修改
							</Button>
							<BasicConfirm title="确认删除?" api={1} icon="delete" button={true} buttonName="删除" data={''} handleConfirm={this.handleConfirm} />
						</div>
					}
				>
					<TabPane tab="文档类型" key="1">
						<Tree checkable onExpand={this.onExpand} expandedKeys={this.state.expandedKeys} autoExpandParent={this.state.autoExpandParent} onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}>
							{this.renderTreeNodes(treeData)}
						</Tree>
					</TabPane>
				</Tabs>
			</div>
		);
	}
}
export default Form.create()(DocumentType);
